<template>
    <div class="divCommomStyle">
      <div class="content">
        <div class="title">
          <span>预警应急处理量</span>
        </div>
        <div class="Chart3">
            <div class="left">
              <div class="title">报警名称</div>
              <div class="left-content">
                <span v-for="item in leftData" :key="item.id">{{item.name}}</span>
              </div>
              <!-- <div class="left-content" v-for="item in leftData" :key="item.id">
                <div>{{item.name}}</div>
              </div> -->
            </div>
            <div class="middle">
              <div class="title">报警数量</div>
               <div class="middle-content">
                <span v-for="rightitem in rightData" :key="rightitem.id"  >{{rightitem.name}}</span>
              </div>
              <!-- <div class="middle-content" v-for="rightitem in rightData" :key="rightitem.id"    >
                <div>{{rightitem.name}}</div>
              </div> -->
            </div>
            <div class="right">
              <div class="title">处理量</div>
              <div id="chart3" :style="{width: '100%', height: '95%'}"></div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      chart3: null,
      leftData: [{
        id: 1,
        name: '预警A0029010'
      },
      {
        id: 2,
        name: '预警A0029020'
      },
      {
        id: 3,
        name: '预警A0029030'
      },
      {
        id: 4,
        name: '预警A0029040'
      },
      {
        id: 5,
        name: '预警A0029050'
      }],
      rightData: [{
        id: 1,
        name: '10'
      },
      {
        id: 2,
        name: '100'
      },
      {
        id: 3,
        name: '30'
      },
      {
        id: 4,
        name: '40'
      },
      {
        id: 5,
        name: '50'
      }]
    }
  },
  mounted () {
    this.initchart3()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chart3) {
      this.chart3.resize()
    }
  },
  methods: {
    initchart3 () {
      let data = [20, 100, 30, 40, 50]
      let titlename = [' ', ' ', ' ', ' ', ' ']
      let valdata = [20, 100, 30, 40, 50]
      let myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
      let option = {
        xAxis: {
          show: false
        },
        grid: {
          width: '70%',
          height: '80%',
          left: '10%',
          top: '4%',
          bottom: '0'
        },
        yAxis: [{
          // max: 1000,
          // splitNumber: 5,
          show: true,
          data: titlename,
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: function (value, index) {
                var num = myColor.length
                return myColor[index % num]
              }
            },
            formatter: function (value, index) {
              return [
                '{title|' + value + '} '
              ].join('\n')
            },
            rich: {}
          }
        }, {
          show: true,
          inverse: true,
          data: valdata,
          axisLabel: {
            textStyle: {
              color: function (value, index) {
                var num = myColor.length
                return myColor[index % num]
              }
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '条',
          type: 'bar',
          yAxisIndex: 0,
          data: data,
          barWidth: 15,
          // barGap: '300%',
          // barCategoryGap: '150%',
          itemStyle: {
            normal: {
              barBorderRadius: 10,
              color: function (params) {
                var num = myColor.length
                return myColor[params.dataIndex % num]
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: '{c}%'
            }
          }
        }]
      }
      this.chart3 = this.$echarts.init(document.getElementById('chart3'))
      this.chart3.setOption(option)
      window.addEventListener('resize', () => {
        this.chart3.resize()
      })
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  justify-content: center;
  align-items: center;
}
.divCommomStyle .Chart3{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 90%;
  margin-top:10px;
}
.title{
  text-align: left;
  font-size: 14px;
  color: #29adf1;
}
.Chart3 .title{
  text-align: center;
  padding: 5px;
}
.Chart3 .left,.Chart3 .middle{
  flex: 3;
  width: 100%;
  height: 92%;
}
.Chart3 .left .left-content span,.Chart3 .middle .middle-content span{
  display: inline-block;
  width:100%;
  white-space: nowrap;
  text-overflow: clip;
}
.Chart3 .left .left-content,.Chart3 .middle .middle-content{
  display: flex;
  height: 80%;
  text-align: center;
  flex-flow: column;
  justify-content: space-around;
  align-items: center;
}
/* .Chart3 .middle div{
  padding-top: 2px;
  padding-bottom: 9px;
} */
.left .left-content,.middle .middle-content{
  color: #e1e1e1;
  font-size: 12px;
}
.Chart3 .right{
  flex: 6;
  width: 100%;
  height: 92%;
}
</style>
